<template>
  <div class="gva-search-box">
    <div class="table-container">
      <div class="table-wrapper">
        <h2 class="sticky-title">软件升级信息</h2>
        <el-table
            :data="upgradeInfoData"
            @sort-change="sortChange"
            @selection-change="handleSelectionChange"
            class="sticky-header-table"
            height="300"
        >
          <el-table-column align="left" label="软件id" min-width="80" prop="id" sortable="custom" />
          <el-table-column align="left" label="软件名称" min-width="150" prop="name" sortable="custom" />
          <el-table-column align="left" label="版本" min-width="150" prop="version" sortable="custom" />
          <el-table-column align="left" label="软件包url" min-width="150" prop="url" sortable="custom" />
          <el-table-column align="left" label="大小" min-width="150" prop="size" sortable="custom" />
          <el-table-column align="left" label="md5" min-width="150" prop="md5" sortable="custom" />
          <el-table-column align="left" label="上传时间" min-width="150" prop="uploadTime" sortable="custom" />
          <el-table-column align="left" label="上传用户id" min-width="150" prop="uploadUserId" sortable="custom" />
          <el-table-column align="left" fixed="right" label="升级" width="200">
            <template #default="scope">
              <el-button icon="edit" type="primary" link @click="editApiFunc(scope.row)">升级</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="kong"></div>

      <div class="table-wrapper">
        <h2 class="sticky-title">软件下载记录</h2>
        <el-table
            :data="downloadRecordData"
            @sort-change="sortChange"
            @selection-change="handleSelectionChange"
            class="sticky-header-table"
            height="300"
        >
          <el-table-column align="left" label="软件id" min-width="60" prop="id" sortable="custom" />
          <el-table-column align="left" label="软件名称" min-width="150" prop="name" sortable="custom" />
          <el-table-column align="left" label="上传时间" min-width="150" prop="uploadTime" sortable="custom" />
          <el-table-column align="left" label="请求ip" min-width="150" prop="requestIp" sortable="custom" />
          <el-table-column align="left" label="下载次数" min-width="150" prop="downloadCount" sortable="custom" />
          <el-table-column align="left" label="当前版本" min-width="150" prop="currentVersion" sortable="custom" />
          <el-table-column align="left" fixed="right" label="操作结果" width="200">
            <template #default="scope">
              <el-button icon="edit" type="primary" link @click="editApiFunc(scope.row)">成功</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="kong"></div>

      <div class="table-wrapper">
        <h2 class="sticky-title">软件升级策略</h2>
        <el-table
            :data="upgradePolicyData"
            @sort-change="sortChange"
            @selection-change="handleSelectionChange"
            class="sticky-header-table"
            height="300"
        >
          <el-table-column align="left" label="软件id" min-width="60" prop="id" sortable="custom" />
          <el-table-column align="left" label="开始时间" min-width="150" prop="startTime" sortable="custom" />
          <el-table-column align="left" label="结束时间" min-width="150" prop="endTime" sortable="custom" />
          <el-table-column align="left" label="最大下载量" min-width="150" prop="maxDownloads" sortable="custom" />
          <el-table-column align="left" label="最低版本" min-width="150" prop="minVersion" sortable="custom" />
          <el-table-column align="left" fixed="right" label="操作结果" width="200">
            <template #default="scope">
              <el-button icon="edit" type="primary" link @click="editApiFunc(scope.row)">成功</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-drawer v-model="syncApiFlag" size="80%" :before-close="closeSyncDialog" :show-close="false">
      <!-- Drawer content -->
    </el-drawer>

    <el-drawer v-model="dialogFormVisible" size="100%" :before-close="closeDialog" :show-close="false">
      <!-- Drawer content -->
    </el-drawer>
  </div>
</template>

<style scoped>
.table-container {
  display: flex;
  flex-direction: column;
}

.table-wrapper {
  overflow-y: auto;
  max-height: 600px; /* Set a max height for the tables */
  width: 100%;
  flex: 1; /* Allow tables to grow */
  position: relative;
}

.sticky-title {
  position: sticky;
  top: 0;
  background: white;
  z-index: 2;
  padding: 10px 0;
}

.el-table th.el-table__cell {
  position: sticky;
  top: 40px; /* Adjust based on the height of your sticky title */
  background: white;
  z-index: 1;
}
.kong{
  height: 50px;
}
</style>
<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 软件升级信息假数据
const upgradeInfoData = ref([
  { id: '1', name: '软件A', version: '1.0.0', url: 'http://example.com/a', size: '50MB', md5: 'abcd1234', uploadTime: '2024-07-25 12:00:00', uploadUserId: 'user1' },
  { id: '2', name: '软件B', version: '1.1.0', url: 'http://example.com/b', size: '75MB', md5: 'abcd5678', uploadTime: '2024-07-25 13:00:00', uploadUserId: 'user2' },
  { id: '3', name: '软件C', version: '1.2.0', url: 'http://example.com/c', size: '100MB', md5: 'abcd91011', uploadTime: '2024-07-25 14:00:00', uploadUserId: 'user3' },
  { id: '4', name: '软件D', version: '2.0.0', url: 'http://example.com/d', size: '125MB', md5: 'abcd1213', uploadTime: '2024-07-25 15:00:00', uploadUserId: 'user4' },
  { id: '5', name: '软件E', version: '2.1.0', url: 'http://example.com/e', size: '150MB', md5: 'abcd1415', uploadTime: '2024-07-25 16:00:00', uploadUserId: 'user5' }
])

// 软件下载记录假数据
const downloadRecordData = ref([
  { id: '1', name: '软件A', uploadTime: '2024-07-25 12:00:00', requestIp: '192.168.0.1', downloadCount: 10, currentVersion: '1.0.0' },
  { id: '2', name: '软件B', uploadTime: '2024-07-25 13:00:00', requestIp: '192.168.0.2', downloadCount: 15, currentVersion: '1.1.0' },
  { id: '3', name: '软件C', uploadTime: '2024-07-25 14:00:00', requestIp: '192.168.0.3', downloadCount: 20, currentVersion: '1.2.0' },
  { id: '4', name: '软件D', uploadTime: '2024-07-25 15:00:00', requestIp: '192.168.0.4', downloadCount: 25, currentVersion: '2.0.0' },
  { id: '5', name: '软件E', uploadTime: '2024-07-25 16:00:00', requestIp: '192.168.0.5', downloadCount: 30, currentVersion: '2.1.0' }
])

// 软件升级策略假数据
const upgradePolicyData = ref([
  { id: '1', startTime: '2024-07-25 00:00:00', endTime: '2024-07-25 23:59:59', maxDownloads: 100, minVersion: '1.0.0' },
  { id: '2', startTime: '2024-07-26 00:00:00', endTime: '2024-07-26 23:59:59', maxDownloads: 200, minVersion: '1.1.0' },
  { id: '3', startTime: '2024-07-27 00:00:00', endTime: '2024-07-27 23:59:59', maxDownloads: 300, minVersion: '1.2.0' },
  { id: '4', startTime: '2024-07-28 00:00:00', endTime: '2024-07-28 23:59:59', maxDownloads: 400, minVersion: '2.0.0' },
  { id: '5', startTime: '2024-07-29 00:00:00', endTime: '2024-07-29 23:59:59', maxDownloads: 500, minVersion: '2.1.0' },
])

// 操作按钮的处理函数
const editApiFunc = (row) => {
  ElMessage({
    type: 'success',
    message: `操作: ${row.name}`,
  })
}
</script>


<style scoped lang="scss">
.warning {
  color: #dc143c;
}
</style>
